<template>
  <div class="pageRecommend">
    <!-- 轮播图 -->
    <el-row>
      <el-col :span="24">
        <div class="grid-content left">
          <el-carousel indicator-position="none" height="85vh">
            <el-carousel-item v-for="(item, index) in carImg" :key="index">
              <div class="carContent">
                <span style="z-index: 888">{{ item.carName }}</span>
                <el-image
                  style="height: 90vh; width: 100vw; cursor: pointer"
                  :src="item.url"
                  :fit="cover"
                  @click="toDetails(item.urlId)"
                >
                </el-image>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </el-col>
    </el-row>

    <!-- 第二行 -->
    <el-row>
      <el-col :span="12">
        <div class="grid-content mid">
          <p>—好车推荐—</p>
          <div
            v-if="
              goodCar1.length != 0 &&
              goodCar2.length != 0 &&
              goodCar3.length != 0
            "
          >
            <div class="goodCar">
              <div
                class="car_container"
                v-for="(item, index) in goodCar1"
                :key="index"
              >
                <img
                  :src="item.url"
                  @click="toDetails(item.urlId)"
                  style="margin-left: 10px"
                />
                <div class="info">
                  <div class="carname" @click="toDetails(item.urlId)">
                    {{ item.carName }}
                  </div>
                  <div class="price">{{ item.price }} 万</div>
                </div>
              </div>
            </div>

            <div class="goodCar">
              <div
                class="car_container"
                v-for="(item, index) in goodCar2"
                :key="index"
              >
                <img :src="item.url" @click="toDetails(item.urlId)" />
                <div class="info">
                  <div class="carname" @click="toDetails(item.urlId)">
                    {{ item.carName }}
                  </div>
                  <div class="price">{{ item.price }} 万</div>
                </div>
              </div>
            </div>

            <div class="goodCar">
              <div
                class="car_container"
                v-for="(item, index) in goodCar3"
                :key="index"
              >
                <img :src="item.url" @click="toDetails(item.urlId)" />
                <div class="info">
                  <div class="carname" @click="toDetails(item.urlId)">
                    {{ item.carName }}
                  </div>
                  <div class="price">{{ item.price }} 万</div>
                </div>
              </div>
            </div>
          </div>
          <div
            v-else
            style="
              display: flex;
              justify-content: center;
              align-items: center;
              height: 80%;
            "
          >
            <p style="font-size: 24px">暂 无 数 据</p>
          </div>
        </div>
      </el-col>

      <el-col :span="12">
        <div class="grid-content right">
          <p>—论坛热帖—</p>
          <div v-if="listDetails.length != 0">
            <div
              class="listDetails"
              v-for="(item, index) in listDetails"
              :key="index"
              @click="toPostview"
            >
              <div class="avatar">
                <el-avatar
                  :src="item.avatar == '' ? avatar_url : api_url + item.avatar"
                ></el-avatar>
                <span class="span">{{ item.groupName }}</span>
              </div>
              <div class="content">
                <p>
                  {{ item.content }}
                </p>
              </div>
            </div>
          </div>

          <div
            v-else
            style="
              display: flex;
              justify-content: center;
              align-items: center;
              height: 80%;
            "
          >
            <p style="font-size: 24px">暂 无 数 据</p>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<!--  -->
<script>
import { mapState } from "vuex";
export default {
  name: "PageRecommendation",

  computed: {
    ...mapState(["avatar_url", "api_url"]),
  },

  data() {
    return {
      carImg: null,
      cover: null,
      goodCar1: [],
      goodCar2: [],
      goodCar3: [],

      listDetails: [1],
    };
  },
  mounted() {
    this.axios
      .get("/banners/index")
      .then((res) => {
        this.carImg = res.data.data;
      })
      .catch((err) => {
        console.log(err);
      });

    this.getGoodCar1();
    this.getGoodCar2();
    this.getGoodCar3();

    this.getListDetails();
  },

  methods: {
    // 获取好车推荐
    getGoodCar1() {
      let samecar_list = [];
      this.axios
        .get(`/cars/compare-car-by-level?urlId=878`)
        .then((res) => {
          let m, n, t;
          samecar_list = res.data;
          t = Math.floor(Math.random() * samecar_list.length);
          switch (true) {
            case t == 0:
              (m = 0), (n = 3);
              break;
            case t > 0 && t <= 3:
              (m = 0), (n = 3);
              break;
            case t > 3:
              (n = t), (m = n - 3);
              break;
          }
          this.goodCar1 = samecar_list.slice(m, n);
        })
        .catch((err) => {
          console.log(err);
        });
    },

    getGoodCar2() {
      let samecar_list = [];
      this.axios
        .get(`/cars/compare-car-by-level?urlId=96`)
        .then((res) => {
          let m, n, t;
          samecar_list = res.data;
          t = Math.floor(Math.random() * samecar_list.length);
          switch (true) {
            case t == 0:
              (m = 0), (n = 3);
              break;
            case t > 0 && t <= 3:
              (m = 0), (n = 3);
              break;
            case t > 3:
              (n = t), (m = n - 3);
              break;
          }
          this.goodCar2 = samecar_list.slice(m, n);
        })
        .catch((err) => {
          console.log(err);
        });
    },

    getGoodCar3() {
      let samecar_list = [];
      this.axios
        .get(`/cars/compare-car-by-level?urlId=216`)
        .then((res) => {
          let m, n, t;
          samecar_list = res.data;
          t = Math.floor(Math.random() * samecar_list.length);
          switch (true) {
            case t == 0:
              (m = 0), (n = 3);
              break;
            case t > 0 && t <= 3:
              (m = 0), (n = 3);
              break;
            case t > 3:
              (n = t), (m = n - 3);
              break;
          }
          this.goodCar3 = samecar_list.slice(m, n);
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 获取帖子详情
    getListDetails() {
      this.axios
        .get(`/forum/listDetails-by-groupId?groupId=1`, {
          headers: {
            // 设置请求头
            Authorization: `${this.token}`,
          },
        })
        .then((res) => {
          if (res.data.status == 20000) {
            this.listDetails = res.data.data.slice(0, 3);
            console.log(this.listDetails);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 帖子详情页
    toPostview() {
      this.$router.push(`/postview`);
    },

    // 汽车详情页
    toDetails(urlId) {
      this.$router.push(`/cardetail/${urlId}`);
    },
  },
};
</script>

<style lang="scss">
.pageRecommend {
  .el-row {
    margin-bottom: 0px;
  }

  .el-col {
    border-radius: 4px;
  }

  .left {
    background: #99a9bf;
    height: 85vh;
    width: 100%;
  }

  .mid {
    background: #fff;
    height: 52vh;
  }

  .right {
    background: #d3dce6;
    height: 52vh;
    width: 100%;
  }

  .right,
  .mid {
    p {
      color: #34373c;
      font-size: 20px;
      padding-top: 10px;
      letter-spacing: 5px;
    }
  }

  .grid-content {
    min-height: 36px;
  }

  .carContent {
    display: flex;
    flex-direction: column;
    align-items: center;

    > img {
      width: 100%;
      height: 100%;
    }

    > span {
      font-size: 60px;
      font-weight: 900;
      color: #d3dce6;
      position: absolute;
      left: 10vw;
      top: 2vh;
      text-shadow: 3px 3px 3px #000000;
      letter-spacing: 5px;
    }
  }

  .el-carousel__arrow {
    width: 60px;
    height: 60px;

    .el-icon-arrow-left,
    .el-icon-arrow-right {
      font-size: 26px;
    }
  }

  .goodCar {
    display: flex;
    justify-content: space-evenly;
    margin-top: 18px;
    margin-bottom: 28px;

    .car_container {
      width: 235px;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      border: 2px #34373c solid;
      border-radius: 6px;

      // 右边图片
      img {
        width: 120px;
        height: 80px;
        overflow: hidden;
      }

      img:hover {
        transform: scale(1.1);
        transition: all 0.5s ease;
        cursor: pointer;
      }

      //同款汽车数据
      .info {
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .carname {
          color: #34373c;
          margin-top: 20px;
        }

        .carname:hover {
          color: #e6a23c;
          cursor: pointer;
        }

        .price {
          margin-bottom: 20px;
          color: #e62021;
        }
      }
    }
  }

  .listDetails {
    width: 710px;
    display: flex;
    flex-direction: column;
    align-items: start;
    margin: 20px auto;
    padding: 10px;
    background-color: #99a9bf1a;
    border: 2px #34373c solid;
    border-radius: 6px;
    cursor: pointer;

    .avatar {
      display: flex;
      align-items: center;

      .el-avatar {
        margin: 0 0 4px 0;
      }

      .span {
        display: inline-block;
        font-size: 20px;
        margin-left: 10px;
      }
    }

    .content {
      p {
        width: 680px;
        text-align: left;
        color: #34373c;
        font-size: 20px;
        padding: 0;
        padding-left: 12px;
        letter-spacing: 0;
        /* 定量文本显示 */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
</style>
